<template>
  <!--全局组件loading开发-->
  <transition name="custom-loading-fade">
    <!--loading蒙版-->
    <div class="request-loading-view" v-show="visible">
      <div class="loading-view">
        <div class="loading"></div>
        <div>{{ text?text:'加载中...' }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      visible: false,
    }
  }
}
</script>

<style lang="less" scoped>
  .request-loading-view {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 198903060;
		background-color: rgba(0, 0, 0, 0.001);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading-view {
		font-size: 20px;
		color: #fff;
		width: 140px;
		height: 140px;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 动画样式 */
	.loading {
		margin-bottom:20px;
		border: 6px solid rgba(0, 0, 0, 0.01);
		border-radius: 50%;
		border-top: 6px solid #fff;
		border-right: 6px solid #fff;
		border-bottom: 6px solid #fff;
		width: 50px;
		height: 50px;
		-webkit-animation: spin 1.4s linear infinite;
		animation: spin 1.4s linear infinite;
	}

	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>